<template>
 <div class="classify">
     <div class="title">
         <p>商品分类</p>
         <img src="../assets/img/ic_search.png" alt="">
     </div>
         <div class="sousuo">
             <img src="../assets/img/ic_search.png" alt="">
             <input type="text" placeholder="搜索商品/供应商">
         </div>
         <div class="center">
            <!-- 菜单 -->
            <ul class="menu">
                <li  v-for="(v,i) in list" :key="i" @click="li(i)" :class="{lis:i==con}">{{v.sName}}</li>
            </ul>
            <!-- 内容 -->
            <div class="right">
                <ul class="tul" v-if="list!=''">
                    <span class="span">{{list[index].sName}}</span>
                    <li v-for="(n,i1) in list[index].stationSaleTypeModels" :key="i1">
                        <img :src="n.sPic">
                        <span>{{n.sName}}</span>
                    </li>
                    </ul>
                    <ul class="pinpai" v-if="pinpai!=''">
                    <li v-for="(v,i2) in pinpai"  :key="i2">
                        <img :src="v.logoUrl">
                    <span>{{v.name}}</span>
                    </li>
                </ul>
            </div>
         </div>
 </div>
</template>

<script>
import axios from "axios";
import { Swipe, SwipeItem } from "mint-ui";
import { shouye,fenlei,pinpai } from "../api/api.js";
export default {
   name:'classify',
   data(){
       return{
           list:[],
           pinpai:[],
           id:3558,
           index:0,
           con:0,
           ss:""
       };
   },
   created() {
    this.list = this.$store.state.fenleiresule;
    this.findpinpai();
     this.pinpai=this.$store.state.pinpai;
     console.log(this.pinpai);
  },
  methods: {
    li(index) {
      this.index = index;
      this.con = index;
      this.findpinpai()
      console.log(this.con)
    },
    findpinpai(){
     return pinpai({
        firstSaleTypeId:this.$store.state.fenleiresule[this.index].id,
        num:100,
        stationId:this.$store.state.myresule.stationId
      }).then(res=>{
         console.log("品牌",res);
         this.ss=res.data.result;
        this.$store.commit("set_pinpai",res.data.result);
        this.pinpai=res.data.result;
        return res;
      })
    }
  }
}
</script>

<style lang="scss" scoped>
 .classify{
    //  overflow: auto;
     width:100%;
     background: #FFFFFF;
     display: flex;
     flex:1;
     flex-direction: column;
    .title{
        height: 0.435rem;
        width:100%;
        border-bottom:1px solid #E4E4E4;
        display: flex;
        align-items: center;
        justify-content: center;
        position:relative;
        p{
            font-family: PingFangSC-Regular;
            font-size: 0.18rem;
            color: #030303;
            letter-spacing: -0.41px;
        }
        img{
            width:0.16rem;
            height:0.16rem;
            position:absolute;
            left:3.4rem;
        }
    }
        .sousuo{
            display:flex;
            width:100%;
            height:0.44rem;
            justify-content:center;
            background-color:red;
            align-items: center;
            position:relative;
            input{
                width: 90%;
                height: 0.32rem;
                background: #ffffff;
                border: 0;
                outline: none;
                box-sizing: border-box;
                border-radius: 0.37rem;
                text-indent: 0.3rem;
                font-family: PingFangSC-Regular;
                font-size: 0.14rem;
                color: #999999;
                letter-spacing: -0.0041rem;
                line-height: 0.14rem;
            }
            img{               
                width: 0.13rem;
                height: 0.13rem;
                position: absolute;
                left: 0.3rem;
            }
        }
         .center {
    display: flex;
    flex: 1;
    border: 0.01rem solid red;
    width: 100%;
    box-sizing: border-box;
    overflow-y: scroll;
    top: 0.44rem;
    .menu {
      width: 25.6%;
      height: auto;
      overflow-y: scroll;
      li {
        width: 100%;
        height: 0.5rem;
        background: #f2f2f2;
        font-family: PingFangSC-Regular;
        font-size: 0.14rem;
        color: #666666;
        letter-spacing: 0;
        text-align: center;
        line-height: 0.5rem;
      }
      .lis {
        background-color: white;
      }
    }
    .right {
      display: flex;
      flex-direction: column;
      flex: 1;
      border: 0.01rem solid red;
      .tul {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        align-items: center;
        margin-bottom: 0.3rem;
        // border: 0.01rem solid red;
        // overflow-x: scroll;
        .span {
          width: 100%;
          display: flex;
          height: 0.5rem;
          // border: 0.01rem solid red;
          font-size: 0.14rem;
          line-height: 0.5rem;
          padding-left: 0.15rem;
        }
        li {
          display: flex;
          flex-direction: column;
          align-items: center;
          overflow-x: scroll;
          img {
            width: 0.8rem;
            height: 0.8rem;
            margin-bottom: 0.1rem;
          }
          span {
            font-weight: bold;
            margin-bottom: 0.15rem;
          }
        }
      }
      .pinpai{
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        align-items: center;
        margin-bottom: 0.3rem;
        span{
          // @extend .span;
           width: 100%;
          display: flex;
          height: 0.5rem;
          // border: 0.01rem solid red;
          font-size: 0.14rem;
          line-height: 0.5rem;
          padding-left: 0.15rem;
          color: red;
        }
        li{
          display: flex;
          flex-direction: column;
          align-items: center;
          overflow-x: scroll;
          img{
            // @extend  img;
            width: 0.8rem;
            height: 0.8rem;
            margin-bottom: 0.1rem;
          }
        }
      }
    }
   }
    }
</style>


